<template>
  <div class="layout">
    <div class="left">
      <!-- #545c64 -->
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#fff"
        router
        :default-active="activeMenu"
        active-text-color="#ffd04b">
        <!-- 关于 -->
        <el-menu-item index="/about">
          <i class="el-icon-s-finance"></i>
          <span slot="title">关于</span>
        </el-menu-item>
        <!-- 流程图 -->
        <el-submenu index="/bpmn">
          <template slot="title">
            <i class="el-icon-s-shop"></i>
            <span>bpmn流程图</span>
          </template>
          <el-menu-item v-for="(item, index) in 11" :key="index" :index="'/bpmn/test' + item">{{ 'test' + item }}</el-menu-item>
          <!-- <el-menu-item index="/bpmn/test2">test2</el-menu-item>
          <el-menu-item index="/bpmn/test3">test3</el-menu-item>
          <el-menu-item index="/bpmn/test4">test4</el-menu-item>
          <el-menu-item index="/bpmn/test5">test5</el-menu-item>
          <el-menu-item index="/bpmn/test6">test6</el-menu-item> -->
        </el-submenu>
        <el-submenu index="/jsplumb">
          <template slot="title">
            <i class="el-icon-s-goods"></i>
            <span>jsplumb流程图</span>
          </template>
          <el-menu-item index="/jsplumb/test1">test1</el-menu-item>
          <el-menu-item index="/jsplumb/test2">test2</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  computed: {
    activeMenu () {
      const route = this.$route
      const { meta, path } = route
      // 判断是否拥有 activeMenu,有就给 activeMenu 设置高亮
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  }
}
</script>

<style lang="scss">
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .left{
    width: 220px;
    height: 100%;
    flex-shrink: 0;
    .el-menu {
      border-right: none !important;
      height: 100%;
    }
  }
  .right {
    flex: 1 1 auto;
    height: 100%;
    background: #fff;
  }
}
</style>
